<template>
  <div class="register">
    <common-header></common-header>
    <div class="regsiterBanner">
      <h3>大众签章开放平台</h3>
    </div>
    <div class="regsiter-box">
      <h5 class="tip">设置密码</h5>
      <el-row :gutter="10">
        <el-col :md="14" :offset="5">
          <el-form :model="modify" ref="modify" :rules="rules">
            <el-form-item label="" prop="email">
              <el-input v-model.lazy="modify.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item label="" prop="code" class="code-input">
              <el-input type="number" v-model.lazy="modify.code" placeholder="请输入验证码"> </el-input>
              <button class="code" :disabled="timeCode.disabled" @click="getCode">{{ timeCode.txt }}</button>
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input show-password v-model.lazy="modify.password" placeholder="请输入密码"> </el-input>
            </el-form-item>
            <el-form-item label="" prop="passwordNew">
              <el-input show-password v-model.lazy="modify.passwordNew" placeholder="请再次输入密码"></el-input>
            </el-form-item>

            <el-form-item label="" style="margin: 10% 0">
              <el-button type="success" align="center" @click="modifyForm('modify')">完成</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <footer>© 2014-2020 山东国盾网信息科技有限公司版权所有. 保留一切权利. 增值电信业务经营许可证：鲁B2-20130183</footer>
    <!-- 图形验证码的弹框 -->
    <el-dialog title="图形验证码" :visible.sync="dialogImg" :close-on-click-modal="false" :modal-append-to-body="false">
      <img class="httpImg" @click="httpImgClick" :src="httpImg" alt="Img" />
      <el-form :rules="rules">
        <el-form-item label="">
          <el-input v-model="imgCode"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogImg = false" style="width:100px">取 消</el-button>
        <el-button type="primary" @click="dialogImgClick" style="width:100px;margin-left:30px">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CommonHeader from '../../common/commonHeader'
import { mapState } from 'vuex'
export default {
  name: 'modifyPassword',
  components: {
    CommonHeader
  },
  data() {
    var validateEmail = (rule, value, callback) => {
      // 验证邮箱
      if (value === '') {
        callback(new Error('请正确填写邮箱'))
      } else if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
        callback(new Error('请输入有效的邮箱'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      // 验证密码
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value.length < 6) {
        callback(new Error('密码长度不得小于6位！'))
      } else {
        callback()
      }
    }
    var validatePassNew = (rule, value, callback) => {
      // 验证再次输入的密码
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.modify.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var validateCode = (rule, value, callback) => {
      // 验证验证码
      if (value === '') {
        callback(new Error('请输入验证码'))
      } else {
        callback()
      }
    }
    return {
      timeCode: {
        // 短信验证码
        txt: '获取验证',
        time: 60,
        disabled: false
      },
      identifyCodes: '',
      identifyCode: '',
      modify: {
        email: '',
        code: '',
        password: '',
        passwordNew: ''
      },
      eyeShow: {
        pass: false,
        newpass: false
      },
      rules: {
        email: [{ validator: validateEmail, trigger: 'blur' }],
        code: [{ validator: validateCode, trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }],
        passwordNew: [{ validator: validatePassNew, trigger: 'blur' }]
      },
      // 图形弹框
      dialogImg: false,
      imgCode: '',
      httpImg: ''
    }
  },
  methods: {
    modifyForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.modify)
          const pass = {
            account: this.modify.email,
            code: this.modify.code,
            password: this.modify.password
          }
          const passList = JSON.stringify(pass)
          console.log(passList)
          this.http
            .post('/web/login/find-back-password', passList)
            .then(res => {
              console.log(res)
              if (res.result_code == '0') {
                this.$message({
                  message: '修改密码成功！',
                  type: 'success'
                })
                this.$router.push('/login')
              } else if (res.result_code == '4003') {
                this.$message({
                  message: res.result_message,
                  type: 'error'
                })
              } else {
                this.$message({
                  message: '修改密码错误！',
                  type: 'error'
                })
              }
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          this.$message({
            message: '修改密码失败！',
            type: 'error'
          })
          return false
        }
      })
    },
    async getCode() {
      console.log(this.modify.email)
      var str = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (this.modify.email == '') {
        // 验证码发送消息提示
        this.$message({
          message: '请正确填写邮箱',
          type: 'error'
        })
        return false
      } else if (!str.test(this.modify.email)) {
        // 验证码发送消息提示
        this.$message({
          message: '请正确填写邮箱',
          type: 'error'
        })
        return false
      } else {
        // 先获取图形验证码
        this.dialogImg = true
        const num = Math.ceil(Math.random() * 100)
        // 图片流转base64
        const data = await this.http.get(`/web/login/get-captcha?${num}`, { responseType: 'arraybuffer' })
        console.log(data)
        this.httpImg = 'data:image/png;base64,' + btoa(new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      }
    },
    timeCodes() {
      // 验证码倒计时
      if (this.timeCode.time > 0) {
        this.timeCode.disabled = true
        this.timeCode.txt = this.timeCode.time + 's'
        this.timeCode.time--
      } else {
        this.timeCode.disabled = false
        this.timeCode.txt = '重新获取'
        this.timeCode.time = 60
        return
      }
      setTimeout(() => {
        this.timeCodes()
      }, 1000)
    },
    // 点击刷新图形验证码(用随机数触发)
    async httpImgClick() {
      const num = Math.ceil(Math.random() * 100)
      const data = await this.http.get(`/web/login/get-captcha?${num}`, { responseType: 'arraybuffer' })
      this.httpImg = 'data:image/png;base64,' + btoa(new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
    },
    // 获取验证码
    async dialogImgClick() {
      if (this.imgCode) {
        this.imgCode = '' // 清空验证码
        this.dialogImg = false
        const codes = {
          account: this.modify.email,
          send_code_type: 5,
          graph_code: this.imgCode
        }
        const codeList = JSON.stringify(codes)
        const data = await this.http.post('/web/login/send-code', codeList)
        console.log(data)
        if (data.result_code == '0') {
          this.$message({
            message: '验证码发送成功！',
            type: 'success'
          })
          this.timeCodes()
        } else {
          this.$message({
            message: data.result_message,
            type: 'error'
          })
          const num = Math.ceil(Math.random() * 100)
          const datas = await this.http.get(`/web/login/get-captcha?${num}`, { responseType: 'arraybuffer' })
          this.httpImg = 'data:image/png;base64,' + btoa(new Uint8Array(datas).reduce((data, byte) => data + String.fromCharCode(byte), ''))
        }
      }
    }
  },
  computed: {
    ...mapState({
      userid: modules => modules.login.loginList.developer_id
    })
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/common.scss';
.desabledactive {
  background: #91dbb4 !important;
}
.identifyCode {
  position: absolute;
  right: 0;
  top: 110%;
  width: 160px;
  z-index: 999;
}
.register {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  .regsiterBanner {
    background: url('~@/assets/images/regsiter/regsiter-banner.png') no-repeat;
    background-size: cover;
    width: 100%;
    height: 377px;
    display: flex;
    align-items: center;
    justify-content: center;
    h3 {
      font-size: 50px;
      color: #ffffff;
      letter-spacing: 3px;
      text-align: center;
    }
  }
  .regsiter-box {
    width: 40%;
    margin: -4.5% auto 0;
    background: #ffffff;
    border-radius: 5px;
    padding: 1.5% 0 0.5%;
    .tip {
      font-size: 22px;
      font-weight: 500;
      color: #4c4c4c;
      letter-spacing: 1px;
      text-align: center;
      margin-bottom: 6.5%;
      span {
        color: $background;
        cursor: pointer;
      }
    }
    /deep/.el-input__inner {
      padding: 1.2% 0 1.2% 2%;
      font-size: 14px;
    }
    /deep/.el-button {
      width: 100%;
      background: $background;
      font-size: 14px;
      padding: 3%;
      letter-spacing: 1px;
    }
    /deep/.el-form-item {
      margin-bottom: 5%;
    }
    /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background: $background;
      border-color: $background;
    }
    /deep/.el-checkbox__input.is-focus .el-checkbox__inner {
      border: 1px solid #dcdfe6;
    }
    .check-tip {
      padding-left: 2%;
      color: #d8d8d8;
      margin-top: 2%;
      display: inline-block;
      a {
        color: $background;
      }
    }
    /deep/.el-form-item__error {
      // top: 22%;
      // right: -20%;
      // left: initial;
    }
    .getcode {
      position: absolute;
      right: 4%;
      top: 0;
      color: #d8d8d8;
      cursor: pointer;
    }
    .code-input {
      width: 60%;
      .code {
        border: 1px solid #dcdfe6;
        background: transparent;
        color: #dcdfe6;
        border-radius: 4px;
        width: 155px;
        padding: 12px;
        position: absolute;
        right: -66%;
        top: -3%;
        cursor: pointer;
      }
    }
    .eyeImg {
      position: absolute;
      top: 35%;
      right: 5%;
      width: 18px;
      height: 16px;
      z-index: 999;
      cursor: pointer;
    }
  }
  footer {
    position: fixed;
    bottom: 2%;
    width: 100%;
    font-size: 14px;
    color: #666666;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 80px;
  }
}
// 图形验证码
.httpImg {
  width: 160px;
  margin-bottom: 10px;
  cursor: pointer;
}
/deep/.el-dialog {
  text-align: center;
  width: 30%;
  .el-dialog__body {
    padding: 20px 100px 0;
    .el-input__inner {
      text-align: center;
    }
  }
  .el-button--default:hover {
    background: #fff;
    color: #23b769;
    border: 1px solid #23b769;
  }
  .el-button--primary:focus,
  .el-button--primary:hover {
    background: #23b769;
    color: #ffffff;
  }
  .el-dialog__footer {
    text-align: center;
  }
}
</style>
